<template>
	<view class="homepage">
		<!-- 头部介绍区域 -->
		<view class="header-section">
			<view class="welcome-card">
				<text class="app-title">运动指导助手</text>
				<text class="app-subtitle">AI驱动的专业运动分析与指导平台</text>
				<view class="features-intro">
					<view class="feature-item">
						<uni-icons type="videocam" size="20" color="#fff"></uni-icons>
						<text class="feature-text">智能视频分析</text>
					</view>
					<view class="feature-item">
						<uni-icons type="chat" size="20" color="#fff"></uni-icons>
						<text class="feature-text">AI专业指导</text>
					</view>
					<view class="feature-item">
						<uni-icons type="bars" size="20" color="#fff"></uni-icons>
						<text class="feature-text">个性化建议</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 应用介绍 -->
		<view class="intro-section">
			<text class="section-title">关于我们</text>
			<view class="intro-content">
				<text class="intro-text">
					运动指导助手是一款基于人工智能技术的专业运动分析应用。通过先进的计算机视觉和机器学习算法，
					我们能够对您的运动视频进行精准分析，识别动作要点，发现改进空间，并提供个性化的专业指导建议。
				</text>
				<text class="intro-text">
					无论您是运动初学者还是专业运动员，我们的AI教练YOMI都能为您提供科学、专业、个性化的运动指导，
					帮助您提升运动表现，预防运动损伤，享受更健康的运动生活。
				</text>
			</view>
		</view>

		<!-- 功能特色 -->
		<view class="features-section">
			<text class="section-title">核心功能</text>
			<view class="features-grid">
				<view class="feature-card">
					<uni-icons type="videocam" size="32" color="#667eea"></uni-icons>
					<text class="feature-title">视频分析</text>
					<text class="feature-desc">上传运动视频，获得专业的姿态分析和动作评估</text>
				</view>
				<view class="feature-card">
					<uni-icons type="chat" size="32" color="#667eea"></uni-icons>
					<text class="feature-title">AI指导</text>
					<text class="feature-desc">与AI教练YOMI对话，获得个性化的运动建议</text>
				</view>
				<view class="feature-card">
					<uni-icons type="bars" size="32" color="#667eea"></uni-icons>
					<text class="feature-desc">详细的分析报告和历史记录管理</text>
				</view>
				<view class="feature-card">
					<uni-icons type="heart" size="32" color="#667eea"></uni-icons>
					<text class="feature-title">健康管理</text>
					<text class="feature-desc">科学的运动建议，帮助预防运动损伤</text>
				</view>
			</view>
		</view>

		<!-- 新闻动态 -->
		<view class="news-section">
			<text class="section-title">最新动态</text>
			<view class="news-list">
				<view class="news-item" v-for="news in newsList" :key="news.id" @click="viewNewsDetail(news)">
					<view class="news-content">
						<text class="news-title">{{ news.title }}</text>
						<text class="news-summary">{{ news.summary }}</text>
						<text class="news-time">{{ formatNewsTime(news.publishTime) }}</text>
					</view>
					<view class="news-image" v-if="news.imageUrl">
						<image :src="news.imageUrl" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			
			<!-- 暂无新闻时的提示 -->
			<view class="no-news" v-if="newsList.length === 0">
				<uni-icons type="info" size="48" color="#ccc"></uni-icons>
				<text class="no-news-text">暂无最新动态</text>
			</view>
		</view>

		<!-- 开始使用提示 -->
		<view class="cta-section">
			<view class="cta-card">
				<text class="cta-title">开始您的智能运动之旅</text>
				<text class="cta-subtitle">点击底部"YOMI"标签，开始使用AI运动指导服务</text>
				<view class="cta-arrow">
					<uni-icons type="down" size="24" color="#667eea"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const newsList = ref([])

// 模拟新闻数据
const mockNews = [
	{
		id: 1,
		title: '运动指导助手2.0版本正式发布',
		summary: '新增多项AI分析功能，提升分析精度和用户体验...',
		publishTime: new Date().toISOString(),
		imageUrl: ''
	},
	{
		id: 2,
		title: 'AI教练YOMI升级，支持更多运动类型',
		summary: '现已支持跑步、篮球、网球、游泳等多种运动项目的专业分析...',
		publishTime: new Date(Date.now() - 86400000).toISOString(),
		imageUrl: ''
	},
	{
		id: 3,
		title: '运动损伤预防功能上线',
		summary: '基于生物力学分析，提供科学的运动损伤预防建议...',
		publishTime: new Date(Date.now() - 172800000).toISOString(),
		imageUrl: ''
	}
]

onMounted(() => {
	loadNews()
})

// 加载新闻数据
const loadNews = async () => {
	try {
		// TODO: 从API获取真实新闻数据
		// const response = await getNewsList()
		// newsList.value = response.data
		
		// 暂时使用模拟数据
		newsList.value = mockNews
	} catch (error) {
		console.error('加载新闻失败:', error)
		newsList.value = mockNews
	}
}

// 查看新闻详情
const viewNewsDetail = (news) => {
	console.log('查看新闻详情:', news)
	uni.showToast({
		title: '新闻详情功能开发中...',
		icon: 'none'
	})
}

// 格式化新闻时间
const formatNewsTime = (timeStr) => {
	const date = new Date(timeStr)
	const now = new Date()
	const diff = now - date
	
	if (diff < 60000) return '刚刚'
	if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
	if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
	if (diff < 2592000000) return `${Math.floor(diff / 86400000)}天前`
	
	return date.toLocaleDateString('zh-CN', {
		year: 'numeric',
		month: 'short',
		day: 'numeric'
	})
}
</script>

<style lang="scss" scoped>
.homepage {
	background-color: #f8f9fa;
	min-height: 100vh;
}

.header-section {
	padding: 30px 20px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	
	.welcome-card {
		text-align: center;
		
		.app-title {
			font-size: 28px;
			font-weight: bold;
			color: white;
			display: block;
			margin-bottom: 8px;
		}
		
		.app-subtitle {
			font-size: 16px;
			color: rgba(255, 255, 255, 0.9);
			display: block;
			margin-bottom: 20px;
		}
		
		.features-intro {
			display: flex;
			justify-content: center;
			gap: 20px;
			
			.feature-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.feature-text {
					font-size: 12px;
					color: rgba(255, 255, 255, 0.8);
					margin-top: 5px;
				}
			}
		}
	}
}

.intro-section, .features-section, .news-section {
	padding: 25px 20px;
	
	.section-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		display: block;
	}
}

.intro-content {
	.intro-text {
		font-size: 15px;
		line-height: 1.6;
		color: #666;
		display: block;
		margin-bottom: 15px;
	}
}

.features-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	
	.feature-card {
		background: white;
		padding: 20px;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		text-align: center;
		
		.feature-title {
			font-size: 16px;
			font-weight: bold;
			color: #333;
			display: block;
			margin: 10px 0 8px 0;
		}
		
		.feature-desc {
			font-size: 13px;
			color: #666;
			line-height: 1.4;
		}
	}
}

.news-list {
	.news-item {
		background: white;
		padding: 15px;
		margin-bottom: 12px;
		border-radius: 8px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.1);
		display: flex;
		gap: 12px;
		
		.news-content {
			flex: 1;
			
			.news-title {
				font-size: 16px;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 6px;
			}
			
			.news-summary {
				font-size: 14px;
				color: #666;
				line-height: 1.4;
				display: block;
				margin-bottom: 8px;
			}
			
			.news-time {
				font-size: 12px;
				color: #999;
			}
		}
		
		.news-image {
			width: 80px;
			height: 60px;
			border-radius: 6px;
			overflow: hidden;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

.no-news {
	text-align: center;
	padding: 40px 20px;
	
	.no-news-text {
		font-size: 14px;
		color: #999;
		margin-top: 10px;
		display: block;
	}
}

.cta-section {
	padding: 30px 20px;
	
	.cta-card {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 25px 20px;
		border-radius: 16px;
		text-align: center;
		
		.cta-title {
			font-size: 18px;
			font-weight: bold;
			color: white;
			display: block;
			margin-bottom: 8px;
		}
		
		.cta-subtitle {
			font-size: 14px;
			color: rgba(255, 255, 255, 0.9);
			display: block;
			margin-bottom: 15px;
		}
		
		.cta-arrow {
			animation: bounce 2s infinite;
		}
	}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-10px);
	}
	60% {
		transform: translateY(-5px);
	}
}
</style>